﻿<!DOCTYPE html>
<html lang="en">
<head th:replace="~{parts/head}">

<!-- page wrapper -->
<body>

    <div class="boxed_wrapper">

        <!-- preloader -->
        <div class="preloader"></div>
        <!-- preloader -->


        <!-- main header -->
        <header class="main-header style-three">

            <!-- header-lower -->
            <div class="header-lower">
                <div class="outer-box clearfix">
                    <div class="left-column">
                        <div class="logo-box">
                            <figure class="logo"><a href="/"><img src="../../images/logo-3.png" alt=""></a></figure>
                        </div>
                        <div th:replace="~{parts/menu-area}">
                    </div>
                    <div class="right-column pull-right">
                        <div th:replace="~{parts/author-box}">
                    </div>
                </div>
            </div>

            <!--sticky Header-->
            <div class="sticky-header">
                <div class="auto-container">
                    <div class="outer-box">
                        <div class="logo-box">
                            <figure class="logo"><a href="/"><img src="../../images/small-logo.png" alt=""></a></figure>
                        </div>
                        <div class="menu-area">
                            <nav class="main-menu clearfix">
                                <!--Keep This Empty / Menu will come through Javascript-->
                            </nav>
                        </div>
<!--                        <div class="btn-box"><a href="register-page.html" class="theme-btn-one"><i class="icon-image"></i>Join Now</a></div>-->
                    </div>
                </div>
            </div>
        </header>
        <!-- main-header end -->

        <!-- Mobile Menu  -->
        <div class="mobile-menu">
            <div class="menu-backdrop"></div>
            <div class="close-btn"><i class="fas fa-times"></i></div>
            
            <nav class="menu-box">
                <div class="nav-logo"><a href="/"><img src="../../images/logo-2.png" alt="" title=""></a></div>
                <div class="menu-outer"><!--Here Menu Will Come Automatically Via Javascript / Same Menu as in Header--></div>
                <div class="contact-info">
                    <h4>Contact Info</h4>
                    <ul>
                        <li>Chicago 12, Melborne City, USA</li>
                        <li><a href="">+88 01682648101</a></li>
                        <li><a href="mailto:info@example.com">info@example.com</a></li>
                    </ul>
                </div>
                <div class="social-links">
                    <ul class="clearfix">
                        <li><a href="/"><span class="fab fa-twitter"></span></a></li>
                        <li><a href="/"><span class="fab fa-facebook-square"></span></a></li>
                        <li><a href="/"><span class="fab fa-pinterest-p"></span></a></li>
                        <li><a href="/"><span class="fab fa-instagram"></span></a></li>
                        <li><a href="/"><span class="fab fa-youtube"></span></a></li>
                    </ul>
                </div>
            </nav>
        </div><!-- End Mobile Menu -->


        <!--page-title-two-->
        <section class="page-title-two">
            <div class="title-box centred bg-color-2">
                <div class="pattern-layer">
                    <div class="pattern-1" style="background-image: url(../../images/shape/shape-70.png);"></div>
                    <div class="pattern-2" style="background-image: url(../../images/shape/shape-71.png);"></div>
                </div>
                <div class="auto-container">
                    <div class="title">
                        <h1>医生主页</h1>
                    </div>
                </div>
            </div>
            <div class="lower-content">
                <ul class="bread-crumb clearfix">
                    <li><a href="/">主页</a></li>
                    <li><a style="cursor: pointer" onclick="window.history.back(-1);">上一页</a></li>
                    <li>医生主页</li>
                </ul>
            </div>
        </section>
        <!--page-title-two end-->


        <!-- doctors-dashboard -->
        <section class="doctors-dashboard bg-color-3">
            <div class="left-panel">
                <div class="profile-box">
                    <div class="upper-box">
                        <figure class="profile-image">
                            <img th:if="${doctor.icon ne null}" th:src="${doctor.icon}" alt="">
                            <img th:if="${doctor.icon eq null}" src="../../images/icons/icon-1.png" alt="">
                        </figure>
                        <div class="title-box centred">
                            <div class="inner">
                                <h3 th:text="${doctor.name}">Dr. Rex Allen</h3>
<!--                                <p>MDS - Periodontology</p>-->
                            </div>
                        </div>
                    </div>
                    <div class="profile-info">
                        <ul class="list clearfix">
                            <th:block th:replace="~{parts/doc-dash}"></th:block>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="right-panel">
                <div class="content-container">
                    <div class="outer-container">
                        <div class="feature-content">
                            <div class="row clearfix">
                                <div class="col-xl-4 col-lg-12 col-md-12 feature-block">
                                    <div class="feature-block-two">
                                        <div class="inner-box">
                                            <div class="pattern">
                                                <div class="pattern-1" style="background-image: url(../../images/shape/shape-79.png);"></div>
                                                <div class="pattern-2" style="background-image: url(../../images/shape/shape-80.png);"></div>
                                            </div>
                                            <div class="icon-box"><i class="icon-Dashboard-1"></i></div>
                                            <h3 th:text="${patientCount}">2375</h3>
                                            <h5>病人总数</h5>
                                            <p>这个数字反映了医院当前接收的病人数量。</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-4 col-lg-12 col-md-12 feature-block">
                                    <div class="feature-block-two">
                                        <div class="inner-box">
                                            <div class="pattern">
                                                <div class="pattern-1" style="background-image: url(../../images/shape/shape-81.png);"></div>
                                                <div class="pattern-2" style="background-image: url(../../images/shape/shape-82.png);"></div>
                                            </div>
                                            <div class="icon-box"><i class="icon-Dashboard-2"></i></div>
                                            <h3 th:text="${doctorCount}">320</h3>
                                            <h5>医生总数</h5>
                                            <p>本医院内当前所有在职医生的数量。</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xl-4 col-lg-12 col-md-12 feature-block">
                                    <div class="feature-block-two">
                                        <div class="inner-box">
                                            <div class="pattern">
                                                <div class="pattern-1" style="background-image: url(../../images/shape/shape-83.png);"></div>
                                                <div class="pattern-2" style="background-image: url(../../images/shape/shape-84.png);"></div>
                                            </div>
                                            <div class="icon-box"><i class="icon-Dashboard-3"></i></div>
                                            <h3 th:text="${appointmentCount}">275</h3>
                                            <h5>预约总数</h5>
                                            <p>医生所负责病人的预约情况显示。</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="doctors-appointment">
                            <div class="title-box">
                                <h3>我的预约</h3>
                            </div>
                            <div class="doctors-list">
                                <div class="table-outer">
                                    <table class="doctors-table">
                                        <thead class="table-header">
                                        <tr>
                                            <th>病人姓名</th>
                                            <th>预约日期</th>
                                            <th>时间段</th>
                                            <th>科室</th>
<!--                                            <th>病情</th>-->
                                            <th>支付金额</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr th:each="item:${appointments}">
                                            <td>
                                                <div class="name-box">
                                                    <figure class="image"><img th:src="${item.patientIcon}" alt=""></figure>
                                                    <h5 th:text="${item.patientNm}">Amelia Anna</h5>
                                                    <span class="designation" id="appointmentId" th:text="${'预约号#'+item.id}">#LK1024T01</span>
                                                </div>
                                            </td>
                                            <td>
                                                <p th:text="${item.appointmentDate}">20 Oct 2020</p>
                                            </td>
                                            <td>
                                                <p th:text="${item.formatPeriod}">20 Oct 2020</p>
                                            </td>
                                            <td>
                                                <p th:text="${item.clinicNm}">General</p>
                                            </td>
<!--                                            <td>-->
<!--                                                <p th:text="${item.detail}">Old Patient</p>-->
<!--                                            </td>-->
                                            <td>
                                                <p th:text="${item.price ne null ? '￥'+item.price : '￥0'}">$50.00</p>
                                            </td>
                                            <th:block th:if="${item.stateId eq '1'}">
                                                <td colspan="2">
                                                    <span class="accept" style="cursor:pointer;"><i class="fas fa-clock"></i>未审批</span>
                                                </td>
                                            </th:block>
                                            <th:block th:if="${item.stateId eq '2'}">
                                                <td colspan="2" >
                                                    <span th:id="${'accept_'+item.id}" class="accept" th:data-appointment_id="${item.id}" onclick="setAppointmentState(this.getAttribute('data-appointment_id'), 3);" style="cursor:pointer;"><i class="fas fa-check"></i>接受</span>
                                                    <span th:id="${'cancel_'+item.id}" class="cancel" th:data-appointment_id="${item.id}" onclick="setAppointmentState(this.getAttribute('data-appointment_id'), 4);" style="cursor:pointer;"><i class="fas fa-times"></i>拒绝</span>
                                                    <span th:id="${'accepted_'+item.id}" class="accept d-none" style="cursor:pointer;"><i class="fas fa-check"></i>已接受</span>
                                                    <span th:id="${'canceled_'+item.id}" class="cancel d-none" style="cursor:pointer;"><i class="fas fa-times"></i>已拒绝</span>
                                                </td>
                                                </td>
                                            </th:block>
                                            <th:block th:if="${item.stateId eq '3'}">
                                                <td colspan="2">
                                                    <span class="accept" style="cursor:pointer;"><i class="fas fa-check"></i>已接受</span>
                                                </td>
                                            </th:block>
                                            <th:block th:if="${item.stateId eq '4'}">
                                                <td colspan="2">
                                                    <span class="cancel" style="cursor:pointer;"><i class="fas fa-times"></i>已拒绝</span>
                                                </td>
                                            </th:block>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- doctors-dashboard -->


        <!-- main-footer -->
        <div th:replace="~{parts/main-footer}"></div>
        <!-- main-footer end -->


        <!--Scroll to top-->
        <button class="scroll-top scroll-to-target" data-target="html" onclick='location.href=("/message?targetId=6")'>
            <img src="../../images/robot-2.png">
        </button>
    </div>


    <script th:replace="~{parts/js}"></script>
    <script>
        $('#doctors-dashboard').addClass("current");
        $('#doc_tab').addClass("current");
        function setAppointmentState(id, stateId) {
            $.ajax({
                type: "post",
                url:"/doctors-dashboard/setState",
                cache: false,
                data: {
                    id: id,
                    stateId: stateId
                },
                success: function (data) {
                    if (data.state === "success") {
                        if (data.appointmentState === "3") {
                            $('#accept_'+id).addClass("d-none");
                            $('#cancel_'+id).addClass("d-none");
                            $('#accepted_'+id).removeClass("d-none");
                        } else {
                            $('#accept_'+id).addClass("d-none");
                            $('#cancel_'+id).addClass("d-none");
                            $('#canceled_'+id).removeClass("d-none");
                        }
                    }
                },
                error: function(res) {

                }
            });
        }
    </script>
</body><!-- End of .page_wrapper -->
</html>
